header-padding-normal = 10px
header-padding-max = 30px
logo-size = 50px

#header
  position: relative
  padding: header-padding-normal 0
  @media print
    display: none

#header-inner
  display: flex
  flex-flow: row nowrap
  align-items: center
  @media mq-mobile
    justify-content: center

#logo-wrap
  flex: 0 logo-size

#logo
  hide-text()
  width: logo-size
  height: logo-size
  background-size: @width @height
  display: block

#main-nav
  display: none
  flex: 1 auto
  padding-left: 20px
  @media mq-normal
    display: block

.main-nav-link
  color: color-menu
  font-weight: menu-font-weight
  text-decoration: none
  line-height: logo-size
  opacity: 0.7
  transition: 0.2s
  font-family: font-title
  display: inline-block
  padding: 0 25px 0 15px
  &:hover
    opacity: 1
    color: color-link-hover

#search-input-wrap
  display: none
  padding-left: 6px
  padding-bottom: 8px
  border-bottom: 1px solid color-gray
  &.on
    display: inline-block

#search-input-icon
  color: #fff
  padding-right: 0.5em
  display: inline-block
  opacity: 0.7

#search-input
  background: none
  font-size: inherit
  font-family: font-title
  color: #fff
  outline: none
  -webkit-appearance: none

#lang-select-wrap
  display: none
  position: relative
  @media mq-normal
    display: block

#lang-select-label
  color: #fff
  opacity: 0.7
  font-family: font-title
  line-height: logo-size
  span
    padding-left: 8px
  i
    opacity: 0.7

#lang-select
  opacity: 0
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  -webkit-appearance: menulist-button
  font-size: inherit
